<template>
  <div class="com-data-base" v-loading="loading">
    <div class="header w-flex-between-center">
      <div class="left header-box">
        <slot name="header-left"></slot>
      </div>
      <div class="center header-box">
        <slot name="header-center"></slot>
      </div>
      <div class="right header-box">
        <slot name="header-righr"></slot>
        <el-button type="primary" size="small" @click="reloadBtnClick">刷新</el-button>
      </div>
    </div>
    <slot />
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'

  @Component({
    components: {
    }
  })
  export default class DataBase extends Vue {
    // 整个页面的loading
    @Prop({ type: Boolean, default: false }) loading!: boolean
    // save按鈕加载
    @Prop({ type: Boolean, default: false }) saveLoading!: boolean

    reloadBtnClick() {
      this.$emit('reload')
    }
  }

</script>

<style scoped lang="scss">
.com-data-base {
  min-height: 500px;
  .header {
    padding-bottom: 10px;
    height: 40px;
    .header-box {
      display: flex;
      align-items: center;
    }
  }
}
</style>
